<template>
	<div class="_wrapper">
		<div class="_abs-cy _fix _radius-20p menu-container _background-1 _flex" v-if="routes && routes.length > 0">
			<ul>
				<template v-for="item in routes">
					<template v-if="item.meta && item.meta.title">
						<li :key="item.path" class="_rel">
							<div @click="menuClick(item)">{{item.meta.title}}</div>
							<div class="_abs menu-children">
								<ul class="_background-1">
									<template v-for="childrenMenu in item.children">
										<template v-if="childrenMenu.meta && childrenMenu.meta.title">
											<li :key="childrenMenu.path" @click="menuClick(childrenMenu)">
												{{childrenMenu.meta.title}}</li>
										</template>
									</template>
								</ul>
							</div>
						</li>
					</template>
				</template>
			</ul>
		</div>
		<div class="_wrapper _box-scroll">
			<router-view />
		</div>
	</div>
</template>

<script>
	import "@/assets/styles/n.css";
	import routes from "@/router/routers/routers";

	console.log(routes)

	export default {
		data() {
			return {
				routes
			}
		},
		methods: {
			menuClick(item) {
				this.$router.push(item.path);
			}
		},
	}
</script>

<style lang="scss" scoped>
	.menu-container {
		width: 120px;
		text-align: center;
		border-radius: 0 15px 15px 0;
		max-height: 90%;
		padding: 20px 0;
		left: -110px;
		z-index: 9999;

		&:hover {
			left: 0;
		}

		ul {
			width: 100%;

			li {
				padding: 10px 0;
				width: 100%;

				&:hover {
					background-color: #0984d9;
					border-radius: 0 15px 15px 0;

					.menu-children {
						display: block;
					}
				}

				.menu-children {
					width: 120px;
					left: 120px;
					top: 0px;
					max-height: 70%;
					display: none;
					z-index: 9999;

					ul {
						border-radius: 0 15px 15px 0;
					}
				}
			}
		}
	}
</style>
